/* eslint-disable react-hooks/rules-of-hooks */
import React, { useState } from "react";
import { Form, Button, Input, Toast} from "antd-mobile";
import { useLogin } from './API/LoginAPI'
import { useHistory } from 'react-router-dom'
import { EyeInvisibleOutline,EyeOutline } from 'antd-mobile-icons'

export default function Login() {
  const history = useHistory()
  const [visible, setvisible] = useState(false)

  const onFinish = async(values: any) => {
    const res = await useLogin(values)
    console.log(res);
    if(res.data.code === 200) {
      window.localStorage.setItem('token',res.data.token);
      Toast.show({
        content: res.data.msg,
      })
      history.push('/')
    }else{
      Toast.show({
        content: res.data.msg,
      })
    }
  };

  const register = () => {
    history.push('/mine/reg')
  }


  return (
    <div className="boss">
      <Form
        layout="horizontal"
        onFinish={onFinish}
        footer={
          <>
            <Button
              block
              type="submit"
              color="primary"
              size="large"
            >
              提交
            </Button>
          </>
          
        }
      >
        <Form.Item
          name="username"
          label="账号"
          rules={[{ required: true, message: "账号不能为空" }]}
        >
          <Input  placeholder="请输入账号" />
        </Form.Item>
        <Form.Item
          name="password"
          label="密码"
          rules={[{ required: true, message: "密码不能为空" }]}
          extra={
            <div>
              {!visible ? (
                <EyeInvisibleOutline onClick={() => setvisible(true)} />
              ) : (
                <EyeOutline onClick={() => setvisible(false)} />
              )}
            </div>
          }
        >
          <Input type={visible ? 'text' : 'password'} placeholder="请输入密码" />
        </Form.Item>
      </Form>
      <div className="reg" onClick={register}>没有账号？去注册</div>
    </div>
  );
}
